2<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-form-item label="会员ID：">
                    <el-input v-model="searchFilters.id" placeholder="请输入会员ID"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                    <el-input v-model="searchFilters.name" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="用户身份证号">
                    <el-input v-model="searchFilters.idCard" placeholder="请输入用户身份证号"></el-input>
                </el-form-item>
                <el-form-item label="第三方用户id">
                    <el-input v-model="searchFilters.thirdUserId" placeholder="请输入第三方用户id"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="searchFilters.sex" placeholder="请输入性别"></el-input>
                </el-form-item>
                <el-form-item label="用户账号：">
                    <el-input v-model="searchFilters.userAccount" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item label="序号：">
                    <el-input v-model="searchFilters.userNumber" placeholder="请输入序号"></el-input>
                </el-form-item>
                <el-form-item label="用户来源渠道：">
                    <el-input v-model="searchFilters.userSource" placeholder="请输入用户来源渠道"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号：">
                    <el-input v-model="searchFilters.phone" placeholder="请输入用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="会员类型">
                    <el-input v-model="searchFilters.memberType" placeholder="请输入会员类型 1普通会员 2 VIP会员"></el-input>
                </el-form-item>
                <el-form-item label="状态所属平台">
                    <el-input v-model="searchFilters.ascriptionStatus" placeholder="请输入状态所属平台"></el-input>
                </el-form-item>
                <el-form-item label="会员积分">
                    <el-input v-model="searchFilters.integral" placeholder="请输入会员积分"></el-input>
                </el-form-item>
                <!-- 搜索区域按钮-查询,重置 -->
                <div class="tool-wrap">
                    <div class="left-area">
                        <el-button-group>
                            <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                            <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                            <el-button type="primary" size="small" @click="freezeApplicationForm()">冻结申请</el-button>
                            <el-button type="primary" size="small" @click="thawApplicationForm()">解冻申请</el-button>
                            <el-button type="primary" size="small" @click="auditForm()">预审核</el-button>
                        </el-button-group>
                    </div>
                </div>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth=300 :tableList="tableList" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation=true :showEditOperation=true :showBatchDelete=false :showSelection=false :showIndex=false :showDeleteOperation=true @findPage="findPage" @handleDetail="handleDetail" @handleDelete="handleDelete" @handleEdit="handleEdit" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" ref="jicTable"></jic-table>
                    <!--冻结解冻界面-->
                    <el-dialog :title="operation ? '冻结界面':'解冻界面'" width="70%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
                        <!--input输入框-->
                        <el-form :model="dataForm" :inline="true" :rules="dataFormRules" ref="dataForm" :size="size" label-width="100px" label-position="right">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="申请：" prop="warehouseType">
                                        <el-select v-model="searchFilters.sts" auto-complete="off">
                                            <el-option label="流入冻结" value="1"></el-option>
                                            <el-option label="流出冻结" value="2"></el-option>
                                            <el-option label="双向冻结" value="3"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="原因：" prop="warehouseAddress" width="100%">
                                        <el-input v-model="searchFilters.applierReason" type="textarea" auto-complete="off" style="width: 30rem;" maxlength="150" show-word-limit></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>

                        <div slot="footer" class="dialog-footer" style="text-align:center">
                            <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
                            <el-button v-if="operation == true" :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
                            <el-button v-if="operation == false" :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";

//二.数据输出区
export default {
  //===== 注册组件 =====
  components: {
    jicTable
  },

  //===== 数据初始化区=====
  data() {
    return {
      //===== 公共数据初始化 =====
      dialogVisible: false,
      selectionChangeList: [],
      pageIndex: 0, //当前页数：首页；
      pageSize: 10, //每页记录数：10条记录；
      totalSize: 0, //总记录数：返回数据总条数
      pageRequest: {
        pageNum: 1,
        pageSize: 10
      }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini",

      //=====表格表头数据=====
      tableHeaderList: [
        {
          prop: "id",
          label: "会员ID",
          minWidth: 100,
          formatter: null
        },

        {
          prop: "name",
          label: "真实姓名",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "idCard",
          label: "身份证号",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "thirdUserId",
          label: "第三方用户id",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "sex",
          label: "性别",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "age",
          label: "年龄",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "userAccount",
          label: "用户账号",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "userNumber",
          label: "序号",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "nickName",
          label: "用户昵称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "phone",
          label: "用户手机号",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "memberGradeId",
          label: "会员等级id",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "memberType",
          label: "会员类型",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "ascriptionStatus",
          label: "状态所属平台",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "integral",
          label: "会员积分",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "status",
          label: "状态",
          minWidth: 100,
          formatter: null
        }
      ],

      //=====搜索表单对应的数据对象初始化=====
      searchFilters: {
        id: null,
        deptId: null,
        name: null,
        idCard: null,
        thirdUserId: null,
        sex: null,
        birth: null,
        address: null,
        age: null,
        headImage: null,
        wxAccount: null,
        wxName: null,
        wxImage: null,
        isAuthentication: null,
        userAccount: null,
        userNumber: null,
        userSource: null,
        nickName: null,
        phone: null,
        memberGradeId: null,
        memberType: null,
        memberValidityTime: null,
        ascriptionStatus: null,
        integral: null,
        createTime: null,
        creatorId: null,
        creatorName: null,
        registrationTime: null,
        lastLogTime: null,
        updateTime: null,
        updateName: null,
        isBlacklist: null,
        deleteFlag: null,
        status: null,
        unionid: null,
        email: null,
        deviceNo: null,
        allocationPid: null,
        allocationStatus: null,
        storeMember: null
      },
      operation: false, // true:冻结, false:解冻
      editDialogVisible: false // 新增编辑界面是否显示
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    };
  },

  //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
  mounted() {
    this.findPage();
  },

  //=====Vue.js 方法区=====
  methods: {
    //预审核
    auditForm() {},
    //冻结申请
    freezeApplicationForm() {
      if (this.selectionChangeList.length < 1) {
        this.$message({
          message: "必须选中一条数据",
          type: "warning"
        });
        return false;
      }
      //this.dialogVisible = true;
      let this_ = this;
      this_.editDialogVisible = true;
      this_.operation = true;
      this_.dataForm = {
        sts: "",
        applierReason: ""
      };
      if (this_.$refs["searchFilters"]) {
        this_.$refs["searchFilters"].clearValidate();
      }
    },
    //解冻申请
    thawApplicationForm() {
      if (this.selectionChangeList.length < 1) {
        this.$message({
          message: "必须选中一条数据",
          type: "warning"
        });
        return false;
      }
      let this_ = this;
      this_.editDialogVisible = true;
      this_.operation = false;
      this_.dataForm = {
        sts: "",
        applierReason: ""
      };
      if (this_.$refs["searchFilters"]) {
        this_.$refs["searchFilters"].clearValidate();
      }
    },
    // 冻结提交
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let this_ = this;
            let params = {};
            if (this_.operation) {
              params = Object.assign({}, this.dataForm);
              this.utils.request.addProductGuaranteefunction(params, function(
                res
              ) {
                if (res.code == "0000") {
                  this_.dataForm = {};
                  this_.findPage(null);
                  this_.dialogVisible = false;
                  this_.$message({
                    message: "操作成功",
                    type: "success"
                  });
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            }
          });
        }
      });
    },
    //1.查询按钮：查询列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }

      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this.utils.request.findPublMemberPage(this_.searchFilters, function(res) {
        if (res.code === "0000") {
          this_.tableList = res.data.list;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }
      });
    },

    // 2.重置按钮：无条件查询搜索框条件
    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },

    // 3.详情按钮对应的方法
    handleDetail(params) {
      this.$router.push({
        path: "/PublMemberDetail/",
        query: {
          id: params.row.id,
          disabled: true
        }
      });
    },

    // 4.编辑按钮对应的方法
    handleEdit(params) {
      this.$router.push({
        path: "/PublMemberDetail/",
        query: {
          id: params.row.id,
          disabled: false
        }
      });
    },

    // 5.跳转到新增记录页面；
    addForm(params) {
      params = {
        row: {
          id: null
        }
      };
      this.$router.push({
        path: "/PublMemberDetail/",
        query: {
          id: params.row.id,
          disabled: false
        }
      });
    },
    // 6.每页记录数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },

    // 7.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 8.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 9.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    // 10.删除按钮：删除选中的记录
    handleDelete(data) {
      this.utils.request.deletePublMember(
        {
          id: data.row.id
        },
        res => {
          if (res.data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.findPage();
          } else {
            this.$message({
              message: "删除失败",
              type: "warning"
            });
          }
        }
      );
    }
    //==========Vue.js自定义方法区==========
  }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
